<template>
	<view>
		<bottom-popup :show="popupShow" bgcolor="transparent" @close="close">
			<view class="share-pupup">
				<view class='share-right'>
					<button @click='openPoster' class='share-box' hover-class="none">
						<!-- <image src="/images/haibao.png"></image> -->
						<text style="font-size: 50rpx;" class="icon-picfill"></text>
						<view class='share'>生成海报</view>
					</button>
				</view>
				<view class='share-left' @click="close">
					<button open-type="share" class='share-box' hover-class="none">
						<!-- <image src="/images/weixin.png"></image> -->
						<text style="font-size: 50rpx;" class="icon-weixin"></text>
						<view class='share'>发给好友</view>
					</button>
				</view>
			</view>
		</bottom-popup>

		<view class="poster-cont" v-if="popup" @tap="()=> this.popup = false">
			<view class='poster' @tap.stop>
				<image mode='widthFix' :src='poster'></image>
			</view>
			<view class='button' @tap.stop='save'>
				<view class="haibao">保存海报</view>
			</view>
		</view>

	</view>
</template>

<script>
	import BottomPopup from "@/components/popup-layer/bottom-popup.vue"
	import Modal from "@/components/popup-layer/modal.vue"
	import userApi from "@/Api/User.js"
	
	export default {
		components: {
			BottomPopup,
			Modal
		},
		props: {
			poster: {
				type: String
			}
		},
		data() {
			return {
				popupShow: false,
				popup: false
			};
		},
		methods: {
			show() {
				this.popupShow = true
			},
			close() {
				this.popupShow = false
			},

			openPoster() {
					this.close()
					this.popup = true
			},

			save() {
				let that = this
				uni.getSetting({ 
					success: (res) => {
						console.log(res)
						if (res.authSetting['scope.writePhotosAlbum']) {
							that._save()
						} else {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: () => that._save(),
								fail: () => {
									uni.showModal({
										title: '提示',
										content: '请授权图片保存相册功能',
										confirmText: '好的',
										showCancel: false,
										confirmColor: '#FF9910',
										success: () => {
											uni.openSetting({
												success: (res) => that._save()
											})
										}
									})
								}
							})
						}
					}
				})
			},

			_save() {
				let that = this;
				uni.showLoading({
					title: '保存中',
					mask: true
				});
				uni.downloadFile({
					url: that.poster,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (ret) => {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								})
								that.close()
							},
							fail: (err) => {
								uni.showToast({
									title: '取消保存',
									icon: 'none'
								})
							},
							complete: () => {
								uni.hideLoading();
								that.popup = false
							}
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.poster-cont {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(#000, .3);
		z-index: 1024;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.share-pupup {
		display: flex;
		background-color: #fff;
		height: 200rpx;
		z-index: 999
	}

	.share-left,
	.share-right {
		flex: 1;
		text-align: center;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.share-left .share,
	.share-right .share {
		margin-top: 15rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #000;
	}

	.button {
		width: 100%;
	}

	.button .haibao {
		margin: auto;
		margin-top: 50rpx;
		width: 208rpx;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 28rpx;
		color: #fff;
		border: 2rpx solid #fff;
		border-radius: 35rpx;
	}

	.share-box {
		line-height: 1;
	}

	.share-box>image {
		width: 50rpx;
		height: 50rpx;
	}

	button::after {
		border: 0;
	}

	button,
	.button-hover {
		margin: auto;
		background-color: transparent;
		padding: 0;
		display: inline;
		line-height: auto;
	}

	.poster {
		width: 590rpx;
		overflow: hidden;
		font-size: 0;
		background-color: #fff;
	}

	.poster>image {
		width: 100%;
	}
</style>
